
<template>
        <div>
            <el-container style="width:100%; height:calc(100vh - 76px);position:absolute;border-top: 1px solid #1a1b37;;">
                <div class="clearfix"></div>
                <el-container>           
                <el-main class="padding-0">
                    <div class="top text-center  relative" >
                        <span class="title" v-for="(item,index) in $store.state.selectCoin" :key="index" v-show="item.id == $store.state.currentCoinId">{{item.sysbol}}</span>
                        <div class="pull-right clearfix text-right margin-top--60">
                            <div class="hand icon-bg-rectangle" :class="targetState == 'one' ? 'active':''"  @click="targetState = targetState == 'one'? '':'one'" >
                                <i class="hand icon icon-close"></i>
                            </div>
                            <div class="hand icon-bg-rectangle"  :class="targetState == 'two' ? 'active':''" @click="targetState = targetState == 'two'? '':'two'">
                                <i class="icon icon-note"></i>
                            </div>
                            <div class="hand icon-bg-rectangle" :class="targetState == 'three' ? 'active':''" @click="changeLineStyle('three')">
                                <i class="icon icon-note-o"></i>
                            </div>
                            <div class="hand icon-bg-rectangle" :class="targetState == 'four' ? 'active':''" @click="changeLineStyle('four')">
                                <i class="icon icon-line"></i>
                            </div>
                            <div class="hand icon-bg-rectangle" :class="targetState == 'five' ? 'active':''" @click="changeLineStyle('five')">
                                <i class="icon icon-set"></i>
                            </div>
                        </div>
                        <div class="target" v-show="this.targetState == 'one'">
                            <div class="title">指标</div>
                            <div class="content">
                               <div class="margin-top-20" @click="changeLineStyle(4)">
                                   <el-checkbox v-model="checked3"  class="font-gray">ADX</el-checkbox> 
                               </div>
                               <div class="margin-top-20"  @click="changeLineStyle(5)">
                                     <el-checkbox v-model="checked4" >VOL</el-checkbox> 
                               </div>
                               <div class="margin-top-20"  @click="changeLineStyle(6)">
                                     <el-checkbox v-model="checked4" >RSI</el-checkbox> 
                               </div>
                                <div class="margin-top-20" @click="closeKline()" >
                                   <el-checkbox v-model="checked4" >关闭</el-checkbox>
                               </div>
                            </div>
                        </div>

                        <div class="target" v-show="this.targetState == 'two'" style="height:auto;" v-if="$store.state.selectCoin.length > 0">
                            <div  v-for="(item,index) in $store.state.selectCoin" :key="index" v-show="item.id == $store.state.currentCoinId">
                                <div class="title">{{item.maxCashDeposi}}</div>
                                <div class="content">
                                <div class="margin-top-20">
                                        <div><span class="font-green">{{item.minCashDeposi}}</span>  <span class="font-gray pull-right">{{item.sysbol}}</span></div>
                                        <div class="font-gray">简介</div>
                                        <div>
                                            <span>
                                                {{item.text}}
                                            </span>
                                        </div>
                                </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div id="line" ref="line">
                       
                    </div> 
                    <div class="percent">
                            <span style="position:absolute;left:8px;" >{{precent.height}}</span>
                            <div class="bg-green" v-bind:style="{height:precent.height}"> 
                                <span></span>
                            </div>
                            <span style="position:absolute;bottom:0px;left:8px;">{{precent.height}}</span>
                    </div>
                    <div class="black hand" @click="goHome()"><i class="el-icon-arrow-left"></i> </div>
                </el-main>
                <el-aside width="250px">
                        <div class="trade" v-show="$store.state.exchangeType == 'option'" style="padding-left:36px;padding-right:36px;position:relative;height:100%;overflow:hidden">
                            <div class="time text-center">
                                <div class="h-50">
                                    <div class="top text-left padding-left-10 padding-right-10">
                                            <span class="font-14 font-gray">时间</span>
                                            <span class="font-14 pull-right">  <input type="text" @focus="options.timeState = true" v-model="options.timeValue">分</span>
                                    </div>
                                </div>
                                <el-row type="flex" class="row-bg text-center border-top hand h-50" justify="space-between" >
                                    <el-col :span="12"><div class="grid-content bg-purple" @click="add('time')"><i class="el-icon-plus font-20"></i></div></el-col>
                                    <el-col :span="12"><div class="grid-content bg-purple-light border-left" @click="cut('time')"><i class="el-icon-minus font-20"></i></div></el-col>
                                </el-row>
                                <div class="h-50 border-top">
                                    <span class="font-14">5分</span>
                                </div>
                                <div class="h-50 border-top">
                                    <span class="font-14">10分</span>
                                </div>
                            </div>
                            <div class="time text-center">
                                <div class="h-50">
                                    <div class="top text-left padding-left-10 padding-right-10">
                                            <span class="font-14 font-gray">金额</span>
                                            <span class="font-14 pull-right">USDT<input type="text" class="text-right"  v-model="monely"></span>
                                    </div>
                                </div>
                                <el-row type="flex" class="row-bg text-center border-top hand h-50" justify="space-between" >
                                    <el-col :span="12"><div class="grid-content bg-purple" @click="add('monely')"><i class="el-icon-plus font-20"></i></div></el-col>
                                    <el-col :span="12"><div class="grid-content bg-purple-light border-left" @click="cut('monely')"><i class="el-icon-minus font-20"></i></div></el-col>
                                </el-row>
                                <div class="h-50 border-top">
                                    <span class="font-14">USDT 100</span>
                                </div>
                                <div class="h-50 border-top">
                                    <span class="font-14">USDT 500</span>
                                </div>
                            </div>
                            <div class="buy text-center">
                                <p>收益</p>
                                <p class="font-20 font-green ">+$18900</p>
                                <el-button class="btn-green margin-top-20" @click="tradeExchange('BUYUP')">买涨</el-button>
                                <el-button class="btn-red margin-top-20" @click="tradeExchange('BUYOR')">卖跌</el-button>
                            </div>
                        </div>
                        <!-- 杠杆交易 -->
                        <div class="lever" v-show="$store.state.exchangeType == 'lever' " style="padding-left:36px;padding-right:36px;position:relative;height:100%;overflow:hidden">
                            <div class="time text-center" >
                                <div class="h-50">
                                    <div class="top text-left padding-left-10 padding-right-10">
                                            <span class="font-14 font-gray">保证金</span>
                                            <span class="font-14 pull-right"> <input type="text" class="text-right" @focus="depositState = true;" v-model="deposit "></span>
                                    </div>
                                </div>
                                <el-row type="flex" class="row-bg text-center border-top hand h-50" justify="space-between" >
                                    <el-col :span="12"><div class="grid-content bg-purple" @click="add('deposit')"><i class="el-icon-plus font-20"></i></div></el-col>
                                    <el-col :span="12"><div class="grid-content bg-purple-light border-left" @click="cut('deposit')"><i class="el-icon-minus font-20"></i></div></el-col>
                                </el-row>
                                <div class="h-50 border-top hand" @click="deposit = 1000">
                                    <span class="font-14">1000 USDT</span>
                                </div>
                                <div class="h-50 border-top hide">
                                    <span class="font-14">100000 USDT</span>
                                </div>
                            </div>
                            <div class="time text-center">
                                 <div class="h-50 text-left padding-left-10 padding-right-10">
                                      <div><span class="font-gray">杠杆</span > <span class="font-white pull-right hand">X{{levelvalue}}</span></div>
                                </div>
                            </div>
                            <div class="time text-center">
                                <div class="h-50">
                                    <div class="top text-left padding-left-10 padding-right-10">
                                            <span class="font-14 font-gray">数量</span>
                                            <span class="font-14 pull-right"><input type="text" class="text-right"  @focus="depositState = true;"  v-model="count"></span>
                                    </div>
                                </div>
                                <el-row type="flex" class="row-bg text-center border-top hand h-50" justify="space-between" >
                                    <el-col :span="12"><div class="grid-content bg-purple" @click="add('count')"><i class="el-icon-plus font-20"></i></div></el-col>
                                    <el-col :span="12"><div class="grid-content bg-purple-light border-left" @click="cut('count')"><i class="el-icon-minus font-20"></i></div></el-col>
                                </el-row>
                                <div class="h-50 border-top hand"  @click="count = 10">
                                    <span class="font-14 hand">10</span>
                                </div>
                                <div class="h-50 border-top hide">
                                    <span class="font-14">18</span>
                                </div>
                            </div>
                            <div class="margin-top-10"><span class="font-gray">总额</span > <span class="font-white pull-right">{{numFilter(count*price)}}</span></div>
                            <div class="margin-top-10 hide"><span class="font-gray">开仓价</span > <span class="font-white pull-right">156.05436</span></div>
                            <div class="margin-top-10 hide"><span class="font-gray">百分比</span > <span class="font-white pull-right">{{precent.height}}</span></div>
                            <div class="buy text-center">
                                <el-button class="btn-green margin-top-20" @click="leverExchange('BUYUP')">买涨<p class="font-14 margin-top-10">157.43244</p></el-button>
                                <el-button class="btn-red margin-top-20" @click="leverExchange('BUYOR')">买跌<p class="font-14 margin-top-10">157.43244</p></el-button>
                            </div>
                        </div>
                        <!-- 保证金 -->
                        <div class="time div-account-input" v-show="depositState" style="background:#2b2d52">
                            <div>
                                <span>数量</span>
                                <i class="el-icon-circle-close hand" @click="depositState=!depositState" style="position: absolute;font-size: 22px;top: -8px;right: -8px;color: #ccc;"></i>
                            </div>
                            <el-row type="flex" class="row-bg text-center hand h-40 margin-top-20" justify="space-between" >
                                <el-col :span="3" style=""><div class="grid-content-left bg-purple" @click="add('count')" ><i class="el-icon-plus font-20"></i></div></el-col>
                                <el-col :span="18">
                                    <input type="text" class="text-center" v-model="count" style="width: 100%;height: 38px;border-radius: 0px;vertical-align: 1px;background:#393b63;" >
                                </el-col>
                                <el-col :span="3" ><div class="grid-content-right bg-purple-light " @click="cut('count')" ><i class="el-icon-minus font-20"></i></div></el-col>
                            </el-row>
                            <div class="margin-top-20">
                                <span>杠杆</span>
                            </div>
                            <el-row type="flex" class="row-bg text-center hand h-40 margin-top-20" justify="space-between" >
                               <el-col :span="4">
                                   <el-button class="btn-list" :class="levelvalue == '10'? 'aqua-button':''" @click="levelvalue=10">10</el-button>                                
                               </el-col>
                               <el-col :span="4">
                                   <el-button class="btn-list" :class="levelvalue == '20'? 'aqua-button':''" @click="levelvalue=20">20</el-button> 
                               </el-col>
                               <el-col :span="4">
                                   <el-button class="btn-list" :class="levelvalue == '30'? 'aqua-button':''" @click="levelvalue=30">30</el-button> 
                               </el-col>
                               <el-col :span="4">
                                   <el-button class="btn-list" :class="levelvalue == '40'? 'aqua-button':''" @click="levelvalue=40">40</el-button> 
                               </el-col>
                               <el-col :span="4">
                                   <el-button class="btn-list" :class="levelvalue == '50'? 'aqua-button':''" @click="levelvalue=50">50</el-button> 
                                                                   
                               </el-col>                   
                            </el-row>
                             <div class="margin-top-10">
                                <span>保证金</span>
                            </div>
                            <div>
                                <button style="width: 100%;border: none;line-height: 34px;border-radius: 4px;margin-top: 20px;">{{depositAction}}</button>
                            </div>
                            
                        </div>  
                        <!-- 数量 -->
                        <div class="time div-account-input font-gray hide" style="background:#2b2d52">
                            <div>
                                <span>数量</span>
                            </div>
                            <el-row type="flex" class="row-bg text-center hand h-40 margin-top-20" justify="space-between" >
                                <el-col :span="3" style=""><div class="grid-content-left bg-purple" ><i class="el-icon-plus font-size-26"></i></div></el-col>
                                <el-col :span="18">
                                    <input type="text" class="text-center div-input"  >
                                </el-col>
                                <el-col :span="3" style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;background: rgba(59,61,103,0.40)"><div class="grid-content-right bg-purple-light " ><i class="el-icon-minus font-size-26"></i></div></el-col>
                            </el-row>
                            <div class="margin-top-20">
                                <span>杠杆</span>
                            </div>
                             <div class="margin-top-10">
                                <input type="text" class="text-center div-input" style="border-radius:4px;" > 
                                <!-- <button style="width: 100%;border: none;line-height: 34px;border-radius: 4px;margin-top: 20px;background: #26284A;">100</button> -->
                            </div>
                             <div class="margin-top-10 text-center">
                                <span class="pull-left">金额(USDT) <i class="el-icon-warning" style="color:red"></i> </span>
                                <span >实付金额=金额+保险金</span>
                                <span class="pull-right">保险金</span>
                            </div>
                            <div class="margin-top-10">
                                <input type="text" class="text-center div-input" style="border-radius:4px;" > 
                                <!-- <button style="width: 100%;border: none;line-height: 34px;border-radius: 4px;margin-top: 20px;background: #26284A;">100</button> -->
                            </div>
                        </div>  
                        <!-- 调节杠杆 不要了，我是不会删的,坐等优化，老板价钱  -->
                        <div class="time div-account-input font-gray hide" style="background:#2b2d52;width: 66px;text-align: center;height: 280px;">
                            <div>
                                <span>杠杆</span>
                            </div>

                            <div class="h-40">
                                <div class="margin-top-20">
                                    <el-button class="btn-list" :class="levelvalue == '10'? 'aqua-button':''" @click="levelvalue=10;levelSelect=false">10</el-button>  
                                </div>
                                 <div class="margin-top-10">
                                    <el-button class="btn-list" :class="levelvalue == '20'? 'aqua-button':''" @click="levelvalue=20;levelSelect=false">20</el-button>  
                                </div>
                                 <div class="margin-top-10">
                                    <el-button class="btn-list" :class="levelvalue == '30'? 'aqua-button':''" @click="levelvalue=30;levelSelect=false">30</el-button>  
                                </div>
                                 <div class="margin-top-10">
                                    <el-button class="btn-list" :class="levelvalue == '40'? 'aqua-button':''" @click="levelvalue=40;levelSelect=false">40</el-button>  
                                </div>
                                 <div class="margin-top-10">
                                    <el-button class="btn-list" :class="levelvalue == '50'? 'aqua-button':''" @click="levelvalue=50;levelSelect=false">50</el-button>  
                                </div>
                            </div>
                        </div>  

                        <!-- 期权交易，本来想混写，想着以后可能会改，所以就多做一点事啦 -->
                        <div class="time modal-options-div" v-show="options.timeState">
                            <div>
                                <span>BTC/USDT</span>
                                <i class="el-icon-circle-close hand" @click="options.timeState=!options.timeState" style="position: absolute;font-size: 22px;top: -8px;right: -8px;color: #ccc;"></i>
                                <span class="pull-right">
                                    <span class="font-green font-size-16" style="vertical-align:-1px;">USDT 1000</span>
                                    <span>收益</span>
                                </span>
                            </div>
                            <el-row class="text-center margin-top-20" type="flex" :gutter='20' justify="space-between">
                                <el-col v-for="(item,i) in options.timeList" :key="i">
                                    <div class="options-time-item hand">
                                        <p>时间段</p>
                                        <div>1235</div>
                                        <p>{{item.stopTime}}</p>
                                        <p class="margin-left-10 margin-right-10 active">{{item.timeLine}}</p>  
                                    </div>
                                </el-col>
                                
                                
                               
                            </el-row>
                        </div>

                </el-aside>
                </el-container>
                    <el-footer class="padding-0" style="height:20px;">
                        <el-row type="flex" class="row-bg text-center  hand" justify="space-between" style="height:20px;background-color:#1e1f42;">
                            <el-col :span="2"><div @click="changeTime('1mon')">1M</div></el-col>
                            <el-col :span="2"><div @click="changeTime('1week')">1W</div></el-col>
                            <el-col :span="2"><div @click="changeTime('1day')">1D</div></el-col>
                            <el-col :span="2"><div @click="changeTime('60min')">1h</div></el-col>
                            <el-col :span="2"><div @click="changeTime('30min')">30min</div></el-col>
                            <el-col :span="2"><div @click="changeTime('15min')">15min</div></el-col>
                            <el-col :span="2"><div @click="changeTime('5min')">5min</div></el-col>
                            <el-col :span="2"><div @click="changeTime('1min')">1min</div></el-col>
                            <el-col :span="2"><div >{{timeStr}}</div></el-col>
                        </el-row>
                    </el-footer>
                </el-container>
                <div class="bg-modal" v-show="depositState || levelSelect || options.timeState" style="position: fixed;width: 100%;height: 100%;top: 0;bottom: 0;background-color: rgba(0,0,0,0.40);z-index:11">                   
                </div>
        </div>
</template>
<script>
import {mapState} from 'vuex'
import {getKLine,getHistoryKLine,leverTrade,optionTrade} from '@/ajax/index'
import echarts from 'echarts'
import socket from '@/websocket/websocket'  // socket。js
import kline from '@/assets/js/Kline' //画K线的js
import {numFilter} from '@/assets/js/rule'
export default {
  name: 'Kline',
  data() {
    return {
      myChart:'',
      echart:{
          option:'',
      },
      dataone:'',
      timeStr:'00/00 00:00:00',
      checked3:false,
      checked4:false,
      targetState:'five', //指标默认显示队伍个
      exchangeType:'',  //交易类型
      dataArr:[], 
      time:1,   //交易时间
      monely:0, // 交易金额
      deposit:10, // 保证金 计算属性
      depositState:false, // 选择保证金
      options:{
          timeState:false,    //设置交易时间 期权
          timeValue:'',
          timeList:[],
      },
      count:0.018, //数量
      price:10000,
      levelSelect:false,
      levelvalue:'30',   
      k_period:'1min',  //k线的时间
      sysbol:'btcusdt',
      //accountType:0, // 交易类型 0虚拟，1真实
      socketOne:'',
      precent:{
          height:'40%' // 表示绿色的
      }
    }
  },
created(){
    this.getNowDate();    
},
computed:{
    currentCoinId (){
       return this.$store.state.currentCoinId
    },
    // 保险金需要计算，所以动态的放在计算属性，用的地方比较多
    depositAction () {
        return this.deposit =  numFilter(this.count/this.levelvalue*this.price);
    }
},
mounted() {
    var dom = this.$refs.line
    this.myChart = echarts.init(dom);
    this.exchangeType = this.$store.state.exchangeType;
    this.getKlineDeatil();  //获取K线数据 
    this.getTimeLine();    // 获取时间线数据
},
methods:{
    numFilter,
    async getKlineDeatil(target){  //获取K线的数据
        const param = {
            'symbol': this.sysbol,
            'period':this.k_period, //1week
            'pageSize':100
        }   
        this.myChart.showLoading({
            text: '数据正在努力加载...',
            textColor: '#ffffff',
            maskColor: 'rgba(27, 28, 56, 0.8)',
        }); 
        setTimeout(() =>{
            this.myChart.hideLoading();
        },5000)
        const result = await getKLine(param)
        if(result.code === '200' && result.data.state === '1'){ 
            this.myChart.hideLoading(); 
            this.dataArr = result.data.data;
            kline.init(this.myChart,this.dataArr)
            this.initSocket(target);
            
          }else{
            this.$alert(result.data.message);
        }
       
    },
    changeTime(value){   // 更换时间线
        this.k_period = value;
    },
    initSocket(target2){
        var timeStmpA="0";
        var timeStmpB="0";
        const url = 'ws://192.168.0.131:7008/'+this.sysbol+'/'+this.k_period+'/'+this.$store.state.userId
        if(target2){
            this.socketOne.close();
        }
        this.socketOne = socket.createWebSocket(url)
        this.socketOne.onmessage = (event) => {    //如果获取到消息，心跳检测重置
                try{
                    let item = JSON.parse(event.data).data;
                    this.price = item.close
                    if(item.type === 1){
                        if((item.id - timeStmpB) > 200){
                            timeStmpB= item.id;
                            kline.add(item)
                        }else{                       
                            return false;                     
                        }            
                    }else{
                        if((item.id - timeStmpA) > 200){
                            timeStmpA = item.id;
                            kline.deleate(item)
                        }else{                       
                            return false;
                        }              
                    }
                }
                catch(e){
                    console.log(event);
                }
                
           }
    },
    getTimeLine(){  // 获取时间线
        //ws://127.0.0.1:7005/time/598466245959876608
        const url = 'ws://192.168.0.131:7005/time/'+this.customerId
        let socketTwo = socket.createWebSocket(url)
        socketTwo.onmessage = (event) => {    //如果获取到消息，心跳检测重置
            try{
                this.options.timeList = JSON.parse(event.data);
                console.log(this.options.timeList);
                // /** 开始时间 */
                // private String startTime;
                // /** 结束时间 */
                // private String stopTime;
                // /** 是否能购买  0为不能购买 1为能购买*/
                // private String isBuy;
                // /** 倒计时 */
                // private String CountDown;
                // /** 时间线 */
                // private String timeLine;
            }
            catch(e){
                console.log(event);
                console.log('数据加载失败,请稍后再试！');
            }
        }
    },
    getNowDate:function(){        // 显示时间动态变化     
            setInterval(()=>{
                //获取年月日
                var time=new Date();
                var year=time.getFullYear();
                var month=time.getMonth()+1;
                var day=time.getDate();
                //获取时分秒
                var h=time.getHours();
                var m=time.getMinutes();
                var s=time.getSeconds();
                //检查是否小于10
                h=check(h);
                m=check(m);
                s=check(s);
                this.timeStr =  month+"/"+day+" "+h+":"+m+":"+s;
            },1000)             
            //时间数字小于10，则在之前加个“0”补位。
            function check(i){
                //方法一，用三元运算符
                var num;
                i<10?num="0"+i:num=i;
                return num;                           
            }
    },
    goHome(){
        this.$router.push({path:'/home'})
    },
    add(key){
       this[key] ++;
    },
    cut(key){
       this[key] = this[key] > 0 ? this[key]-1 : 0 ;
    },
    changeTansType(value){
        this.exchangeType = value;
    },
    async leverExchange(type){  // 杠杆交易  type 交易类型
        const param ={
            'tradeType': type,  //BUYUP，BUYOR
            'productNumber':this.count,     //保证金  
            'investAmount':this.deposit,         //数量
            'investProductId': this.$store.state.currentCoinId,  //货币对id
            'investProductName':this.$store.state.currentSysbol,  // 0 虚拟购买 1实盘购买
            'accountType':this.$store.state.accountType
        }
        let result = await leverTrade(param);
        if(result.code === '200' && result.data.state === '1'){
            this.$alert('下单成功','富易')
        }else{
            this.$alert(data.data.message,'富易')
        }
    },
    async tradeExchange(type){ // 期权交易   // 期货交易  http://127.0.0.1:7005/option/trade
        const param = {
            'tradeType':type,
            'accountType':this.$store.state.accountType,
            'investAmount':'1000',
            'investProductId':this.$store.state.currentCoinId,
            'timeLine':'',
            'startTime':''
        }
        let result = await optionTrade(param)
        if((result.code ==  200) && (result.data.state == 1)){
            console.log(result);
        }else{
            this.$.$alert(result.data.message)
        }
    },
    closeKline(){   //关闭指标
        this.targetState = "";
         kline.changeType(1);
    },
    changeLineStyle(target){ // 更换线图 工具栏切换    
        if(target == 'five'){
            this.targetState = target;
            kline.changeType(1)
        }else if(target == 'four'){
            this.targetState = target;
            kline.changeType(3)
        }else if(target == 'three'){
            this.targetState = target;
            kline.changeType(2);
        }else{
            kline.changeType(target)
        }

    }

},
watch:{
   k_period:function(newValue){
       this.getKlineDeatil();
   },
   currentCoinId:function(newValue){
       this.$store.state.selectCoin.forEach(item => {
           if(item.id == newValue){
               this.sysbol = (item.sysbol).toLowerCase().replace(/\//g,'')
           }
       }); 
   
      this.getKlineDeatil(true); 
   }
}

}
</script>
<style>
/* 由于element 样式不能scopedz修改，所以选择单独写 */
    .el-checkbox__inner{width: 28px!important;height: 28px!important;border: none;background-color:#c2c2e8;}      
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {background-color: #c2c2e8!important} 
    .el-checkbox__inner::after{border:2px solid #fff;height: 16px;left:10px;top:3px;width: 8px;border-left: 0;border-top: 0;}
    .el-checkbox__input.is-checked+.el-checkbox__label{color: #c2c2e8}
</style>

<style lang="less" scoped>   
    .top{
        position: relative;
        .title{font-size: 24px;line-height:60px;display: block}
        .icon-bg-rectangle{margin-top: 6px;margin-right: 10px;border-radius: 6px;display: inline-block;width: 46px;height: 46px; border-radius:8px;background: rgba(59,61,103,0.40);
            .icon{display: block;height: 100%; background: url('./../page/transaction/children/img/spirit.png') no-repeat;}
            .icon-close{ background-position: -16px -485px;}
            .icon-note{ background-position: -16px -534px;}
            .icon-note-o{ background-position: -16px -581px;}
            .icon-line{ background-position: -16px -625px;}
            .icon-set{ background-position: -16px -676px;}
        }
        .active{background-color: #393b63;}
        .target{
            position: absolute;
            right: 0;
            top: 64px;
            width: 254px;
            min-height: 160px;
            line-height: 26px;
            opacity: 1;
            z-index: 111;
            background-color: #33355c;
            border-radius: 10px;
            padding: 20px;
            text-align: left;
            .title{font-size: 28px;color: #FFF;line-height: 20px} 
               
        }

    }
     .font-20{font-size: 20px;vertical-align: middle}
    .time{
        margin-top:20px;
        background-color: #3d3f63;
        border-radius: 10px;
        font-size: 14px;
        .h-50{height: 50px;line-height: 50px;}
        .font-20{font-size: 20px;vertical-align: middle}
        .border-top{border-top: 1px solid #2D2E54} 
        .border-left{border-left: 1px solid #2D2E54} 
        .top{ margin-top:1px;position: relative; }
        input{text-indent: 4px;width: 80px;border: none;color: #fff; outline: none;border-radius: 4px;margin-right: 4px;background-color: #3d3f63} 
    }
    // 期权交易
    .modal-options-div{position: absolute;top: 44px;width: 400px;right: 245px;z-index: 111;padding: 20px;background-color: #2B2D52;
        .options-time-item{
            padding-top: 6px;
            padding-bottom: 6px;
            line-height: 32px;
            font-size: 12px;
            border-radius: 8px;
            background-color: #26284A;
            .active {
                border-bottom: 2px solid #29A8D1;
                
            }
        }
        
    }
    // 弹出层的样式  杠杆交易
    .div-account-input{
        position: absolute;
        background-color: #2B2D52;
        top: 44px;
        width: 340px;
        right: 245px;
        z-index: 111;
        padding: 20px;
        .div-input{
            background-color: rgba(26,27,56,0.2);width: 100%;border:none;outline: none;height: 38px;line-height: 100%;border-radius: 0;vertical-align: 1px;
        }
        .h-40{
            border-radius: 4px;
            height: 40px;
            line-height: 40px;
            .grid-content-left{
                border-top-left-radius: 4px;border-bottom-left-radius: 4px;background: #36385C;
            }
            .grid-content-right{
                border-top-right-radius: 4px;border-bottom-right-radius: 4px;background: #36385C;
            }
            //.el-col-18 input{background-color: #1a1b33;width: 100%;border:none;outline: none;height: 38px;line-height: 100%;border-radius: 0;vertical-align: 1px;}
            .btn-list{padding: 10px 20px;border: none;outline: none;background-color: rgba(26,27,51,0.6);}
            .btn-list:hover{color: inherit;}
        }
    }

    .buy{
        position: absolute;
        width: 160px;
        bottom: 14px;
        .el-button{display: block;width: 100%;border: none;outline: none;height: 90px;font-size: 20px;margin-left: 0px;color: #fff;}
        .btn-green{
                background: -webkit-linear-gradient(left, #49E34A ,#23c224); /* Safari 5.1 - 6.0 */
                background: -o-linear-gradient(right, #49E34A,#23c224) ;/* Opera 11.1 - 12.0 */
                background: -moz-linear-gradient(right, #49E34A,#23c224); /* Firefox 3.6 - 15 */
                background: linear-gradient(to right, #49E34A , #23c224); /* 标准的语法 */
        }
        .btn-red{
                background: -webkit-linear-gradient(left, #E55050 ,#e53737); /* Safari 5.1 - 6.0 */
                background: -o-linear-gradient(right, #E55050,#e53737) ;/* Opera 11.1 - 12.0 */
                background: -moz-linear-gradient(right,#E55050,#e53737); /* Firefox 3.6 - 15 */
                background: linear-gradient(to right, #E55050 , #e53737); /* 标准的语法 */
        }
        .font-14{font-size: 14px;}
    }
    .black{
            position: absolute;
            width: 40px;
            height: 40px;
            left: 18px;
            bottom: 80px;
            border-radius: 50%;
            background-color:rgba(216,216,216,0.1);
            opacity: 0.4;
            text-align: center;
           i{
               display: block;
               height: 100%;
               font-size: 34px;
               color: #fff;
               margin: 2px auto;
            }
        }
    
    .percent{
        position: absolute;
        left: 20px;
        top: 20px;
        width: 4px;
        border-radius: 1px;
        height: 240px;;
        background: -webkit-linear-gradient(top, #f46868,#e53737); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(bottom, #f46868,#e53737) ;/* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(bottom, #f46868 ,#e53737); /* Firefox 3.6 - 15 */
        background: linear-gradient(to bottom, #f46868,#e53737); /* 标准的语法 */
        .bg-green{
            position: relative;
            width: 4px;        
            background: -webkit-linear-gradient(top, #49E34a,#23c224); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom, #49E34a,#23c224) ;/* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(bottom, #49E34a ,#23c224); /* Firefox 3.6 - 15 */
            background: linear-gradient(to bottom, #49E34a,#23c224); /* 标准的语法 */
            span{
                position:absolute;
                display: block;
                width: 6px;
                height: 2px;
                left: -1px;
                bottom: -1px;
                border-radius: 2px;
                background-color: #fff
            }
        }
    }
  #line{
    position: relative;
    width: 100%;
    height: calc(100% - 60px);   
   
  }
  
 </style>
 


